fix(frontend): intempestive re-render of form #1019
Conversation
| onSubmit={onSubmit} | ||
| onUpdate={setValues} | ||
| rules={rules} | ||
| stepReducer={stepReducer} |
There was a problem hiding this comment.
So the main idea of the fix is to delegate the handling of the steps to the wizard. So now, the steps are managed inside of it and not above it, and therefore fix the rerendering issue when changing them.
There was a problem hiding this comment.
But we can still configure it as before by providing initialStepIndex, InitialValues, initialSteps and rules.
There was a problem hiding this comment.
I wonder if we can not group Rules and stepReducer since they are really inter-dependant
There was a problem hiding this comment.
I like the idea ! But I need to figure out how
There was a problem hiding this comment.
no problem, we can do it later :) we can add a reminder
There was a problem hiding this comment.
I'm going to create an issue
| dispatch({ type: "add_branche", payload: steps }); | ||
| } else { | ||
| dispatch({ type: "remove_branche" }); | ||
| const Rules = ({ values, dispatch }) => ( |
There was a problem hiding this comment.
to make sure we have access to values and dispatch which are in the wizard below, I had to transform rules into a component
| rules = null | ||
| initialValues = {}, | ||
| Rules = null, | ||
| stepReducer | ||
| }) { | ||
| const [stepIndex, setStepIndex] = useState(initialStepIndex); |
There was a problem hiding this comment.
Can we merge this state part into the reducer ?
There was a problem hiding this comment.
I don't think so because the stepIndex is something internal to the wizard. So asking to the consumer of wizard to code it in the reducer would mean it could also impact the way pagination is handled. But it should not except for the initial step index. The only thing index can configure is the steps displayed
There was a problem hiding this comment.
in fact I would leave the stepReducer up to the user but include it in a "WizzardReducer" wich handle the setIndex something like
case steps: return {...state, steps: stepReducer(state.steps, action)}since reducers can be combined.
There was a problem hiding this comment.
Ok I added this to the issue aswell, I will get back at it as soon as the planning gets more lightweight.
| return action.payload; | ||
|
|
||
| case "reset": { | ||
| return initialSteps; |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
UnbearableBear
force-pushed
the
manu/fix-rerender
branch
from
7bd1b9b to
da4baec
Compare
|
Bump ! |
| initialStepIndex: PropTypes.number, | ||
| onSubmit: PropTypes.func.isRequired | ||
| initialValues: PropTypes.object, | ||
| Rules: PropTypes.func |
There was a problem hiding this comment.
PropTypes.node should it works for func and element)
There was a problem hiding this comment.
It seems to dislike it. Maybe it is because it is a basic function component ?
I created a related issue here for the remainings: #1021